<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">网格管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>物理网格管理</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="common-layout">
        <el-container>
            <el-aside width="240px"> <!--左右 -->


                <el-input v-model="filterText" style="width: 240px" placeholder="Filter keyword" />

                <el-tree ref="treeRef" @node-click="nodeClick" style="max-width: 600px" class="filter-tree" :data="data"
                    :props="defaultProps" default-expand-all :filter-node-method="filterNode" />

            </el-aside>
            <el-main>

                <div id="search">
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                        <el-form-item label="逻辑网格名称">
                            <el-input v-model="searchForm.GridName" placeholder="请输入逻辑网格名称" clearable />
                        </el-form-item>


                        <el-form-item>
                            <el-button type="primary" @click="getData">查询</el-button>
                        </el-form-item>
                    </el-form>

                </div>

                <!-- {
  "code": 200,
  "msg": "查询逻辑网格列表成功!",
  "data": [
    {
      "id": 616502477090821,
      "departmentId": 1,
      "departmentName": "呼兰区政府",
      "parentGridId": 616502477090821,
      "parentGridName": "string",
      "gridNo": "string",
      "gridName": "string"
    }
  ]
} -->


                <div>
                    <el-button link type="success" size="small" @click="toAdd"> 新增</el-button>

                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column fixed prop="id" label="编号" width="150" />
                        <el-table-column prop="departmentName" label="部门名称" width="120" />
                        <el-table-column prop="gridNo" label="逻辑网格编码" width="120" />
                        <el-table-column prop="parentGridName" label="上级网格名称" width="120" />

                        <el-table-column fixed="right" label="操作" min-width="120">
                            <template #default="scope">
                                <el-button link type="danger" size="small" @click="del(scope.row)">
                                    删除
                                </el-button>
                                <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>

            </el-main>
        </el-container>
    </div>

    {{ form }}
    <!-- 对话框 -->
    <el-dialog v-model="form.isOpen" title="添加逻辑网格" width="500">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="所属部门">
                <el-input v-model="form.departmentName" disabled />
            </el-form-item>

            <!-- 隐藏了 -->
            <el-form-item label="所属部门id" style="display: none;">
                <el-input v-model="form.departmentId" placeholder="请在左侧Tree控件里选择部门" clearable />
            </el-form-item>


            <el-form-item label="上级部门"> <!--级联 -->

                <el-cascader v-model="form.parentGridId" :options="options" :props="props" @change="handleChange" />

            </el-form-item>


            <el-form-item label="网格编码">
                <el-input v-model="form.gridNo" placeholder="请输入网格编码" clearable />
            </el-form-item>


            <el-form-item label="网格名称">
                <el-input v-model="form.gridName" placeholder="请输入网格编码" clearable />
            </el-form-item>

        </el-form>


        <template #footer>
            <div class="dialog-footer">
                <el-button @click="form.isOpen = false">取消</el-button>
                <el-button type="primary" @click="save()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>



<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox, ElTree } from 'element-plus'
import axios from 'axios';

//表格里的编辑
const edit = (row: any) => {
    getOption();
    console.log(row)
    form.isAdd = false;//不是添加 而是编辑 下边开始反填
    form.departmentId = row.departmentId
    form.id = row.id
    form.departmentName = row.departmentName
    form.gridName = row.gridName
    form.gridNo = row.gridNo

    form.isOpen = true
}

//弹窗里的级联
const options = ref([]);
const getOption = () => {
    axios.get('https://localhost:7016/api/DepartMent/GetTree').then(res => {
        options.value = res.data.data
    });
}
const props = {
    children: 'children',
    label: 'departmentName',//树控件节点名称,
    value: 'id'
}

const handleChange = (value) => {
    if (value && value.length > 0) {//判断一下,value不为空
        form.parentGridId = value[value.length - 1]
    }
}
//弹窗
const save = (row: any) => {
    if (form.isAdd) {
        axios.post('https://localhost:7171/api/LogicGrid/CreateLogicGird', form).then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.msg)
                getData();//重新刷新页面table数据
            } else {
                ElMessage.error(res.data.msg)
            }
        })
    } else {//编辑
        axios.put('https://localhost:7171/api/LogicGrid/UpdateLogicGrid', form).then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.msg)
                getData();//重新刷新页面table数据
            } else {
                ElMessage.error(res.data.msg)
            }
        })
    }

}

const toAdd = () => {//添加



    // form.departmentId = 0
    // form.departmentName = ''
    form.parentGridId = 0
    form.gridNo = ''
    form.gridName = ''
    //清空弹窗里的值
    getOption();

    if (nodeKey.value == -1) {
        ElMessageBox.alert("请先在左侧选择区域");
        return;
    }

    form.isOpen = true;
    form.areaId = nodeKey;
    form.isAdd = true;
}

//新增和修改
const form = reactive({
    isAdd: false,
    isOpen: false,
    id: -1,
    "departmentId": 0,
    "departmentName": '',
    "parentGridId": 0,
    "gridNo": "",
    "gridName": ""
})

//删除方法
const del = (row: any) => {
    console.log(row)
    ElMessageBox.confirm('您确认删除吗?', '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.put('https://localhost:7171/api/LogicGrid/DeleteLogicGrid', row).then((res) => {

                if (res.data.code == 200) {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg,
                    })
                    getData()
                } else {
                    ElMessage({
                        type: 'error',
                        message: res.data.msg,
                    })

                }
            });


        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '您取消了删除',
            })
        })
}

//更新方法
const update = (row: any) => {
    console.log(row)
}

//表格数据
const tableData = ref([])
const getData = () => {
    axios.get('https://localhost:7077/api/LogicGrid/QueryLogicGrid', searchForm).then(res => {
        tableData.value = res.data.data
    })

}


//搜索表单区域
const searchForm = reactive({})


//树形控件
const nodeValue = ref() //树形控件的lable
const nodeKey = ref()//树形控件的id

const nodeClick = (nodeobj: any) => {//点击树形控件节点的事件

    console.log(nodeobj)
    nodeKey.value = nodeobj.id
    nodeValue.value = nodeobj.departmentName

    form.departmentId = nodeobj.id
    form.departmentName = nodeobj.departmentName

}

interface Tree {
    [key: string]: any
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {//用来指定data里的字段
    children: 'children',
    label: 'departmentName',//树控件节点名称,
    id: 'id'
}

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
    if (!value) return true
    return data.departmentName.includes(value)
}

const data = ref([]);
const getTreeData = () => {
    axios.get('https://localhost:7016/api/DepartMent/GetTree').then(res => {

        data.value = res.data.data
    })

}

onMounted(() => {
    getData();
    getTreeData();
})
</script>